<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Online</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/jquery.cookie.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <style>
        .card-title {
            text-align: center;
            white-space: nowrap;
        }

        .card-body {
            white-space: nowrap;
        }

        .table img {
            width: 50px;
        }
    </style>
</head>
<body style="background: #F1F3F5;">
<nav class="navbar navbar-expand-sm bg-dark justify-content-between">
    <a class="navbar-brand ms-2" onclick="window.location.reload()">Music Online</a>
    <form class="d-flex">
        <label><input id="search-input" class="form-control" type="text" placeholder="Search"></label>
        <button id="search-btn" class="btn btn-primary ms-2" type="button">Search</button>
    </form>
    <div class="btn-group btn-group-sm me-3">
        <button type="button" id="log-in" class="btn btn-primary btn-dark"
                onclick="window.location.href='./login.html'">Log In
        </button>
        <button type="button" id="register" class="btn btn-primary btn-dark"
                onclick="window.location.href='./register.html'">Register
        </button>
        <img src="../static/img/avatar.jpg" id="avatar" style="width: 30px; height: 30px; display:none;"
             class="rounded-circle m-1" alt="avatar" onclick="window.location.href='userDetails.html'">
        <button type="button" id="userid" class="btn btn-primary btn-dark" style="display: none"
                onclick="window.location.href='userDetails.html'">USERID
        </button>
        <button type="button" id="log-out" class="btn btn-primary btn-dark" style="display: none">Log out</button>
    </div>
</nav>

<div id="banner" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#TODO" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#TODO" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#TODO" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#TODO" data-bs-slide-to="3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../static/img/banner-1.jpg" class="d-block w-100" alt="banner-1">
        </div>
        <div class="carousel-item">
            <img src="../static/img/banner-2.jpg" class="d-block w-100" alt="banner-2">
        </div>
        <div class="carousel-item">
            <img src="../static/img/banner-3.jpg" class="d-block w-100" alt="banner-3">
        </div>
        <div class="carousel-item">
            <img src="../static/img/banner-4.jpg" class="d-block w-100" alt="banner-4">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#banner" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#banner" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<div class="container mt-4">
    <div id="music-list" class="row"></div>
</div>

<div id="search-table" class="container mt-4" style="display:none;">
    <table class="table table-striped table-hover">
        <thead class="table-light">
        <tr>
            <th style="width: 20px;"></th>
            <th style="width: 80px;"></th>
            <th>Music name</th>
            <th>Company</th>
            <th class="text-center">Issuing Date</th>
            <th style="width: 40px;"></th>
        </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</div>
<script>
    let server = "http://localhost:8010";
    let token = $.cookie('token');

    if (token !== undefined) {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: server + "/user/userInfo",
            headers: {
                'Authorization': token,
            },
            success: function (userData) {
                if (userData != null) {
                    $("#log-in").hide();
                    $("#register").hide();
                    $(".navbar img").attr("src", userData.data.avatarUrl).show();
                    $("#userid").html(userData.data.nickName).show();
                    $("#log-out").show();
                }
            },
            error: function () {
                console.log("something wrong.")
            }
        })
    }

    $("#search-btn").click(function () {
        if (token === undefined) {
            location.href = "./login.html";
        }

        let searchValue = $("#search-input").val();
        console.log("user search" + searchValue);
        let searchFor = searchValue.split(" ");
        console.log(searchFor);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: server + "/search",
            headers: {
                'Authorization': token,
            },
            data: {
                'keywords': searchValue,
            },
            success: function (result) {
                if (result.code === 200) {
                    $.each(result.data, function (i, vinyl) {
                        let content = '';
                        content += "<tr><td>";
                        content += i + 1;
                        content += "</td><td><img></td><td>";
                        content += vinyl.musicName;
                        content += "</td><td>";
                        content += vinyl.musicAuthor;
                        content += "</td><td class='text-center'>";
                        content += vinyl.issuingDate;
                        content += "</td><td><button class='btn btn-link'>Detail</button></td></tr>";
                        $("#table-body").append(content);
                        $("#table-body img:last-child").attr("src", "../static/img/ad-trance.jpg");
                        if (token !== undefined) {
                            $("#table-body button:last-child").click(function () {
                                location.href = "./musicDetails.html?vinylId=" + vinyl.id;
                            });
                        } else {
                            $("#table-body button:last-child").click(function () {
                                location.href = "./login.html";
                            });
                        }
                    })

                    $("#banner").hide();
                    $("#music-list").hide();
                    $("#search-table").show();
                } else {
                    console.log("search music failed.");
                    alert("Search Failed. No music existed for keywords.");
                }
            }
        })
    })

    $("#log-out").click(function () {
        $.removeCookie('token');
        console.log("User log out.");
        alert("You have been log out.");
        location.reload();
    })

    $.ajax({
        type: "GET",
        dataType: "json",
        url: server + "/info",
        success: function (result) {
            if (result.data != null) {
                $.each(result.data, function (i, vinyl) {
                    let vinylCard = '';
                    vinylCard += "<div class='col-4 d-flex mt-3'><img class='rounded-3' src='../static/img/ad-trance.jpg'><div class='card'><h5 class='card-title'>";
                    vinylCard += vinyl.musicName;
                    vinylCard += "</h5><p class='card-body'>Author: ";
                    vinylCard += vinyl.musicAuthor;
                    vinylCard += "<br>Date: ";
                    vinylCard += vinyl.issuingDate;
                    vinylCard += "</p><button class='card-footer btn btn-link'>Details</button></div></div>";
                    $("#music-list").append(vinylCard);
                    $("#music-list button:last-child").click(function () {
                        location.href = "./musicDetails.html?vinylId=" + vinyl.id;
                    })
                })
            } else {
                console.log("show music details failed");
            }
        },
        error: function () {
            console.log("get music details failed");
        }
    })
</script>
</body>
</html>